<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <chart :type="'scatter'" :items="items.scatter"></chart>
            <chart :type="'line'" :items="items.line"></chart>
            <chart :type="'bar'" :items="items.bar"></chart>
            <chart :type="'pie'" :items="items.pie"></chart>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="参数名">
                </el-table-column>
                <el-table-column
                    prop="usage"
                    label="参数用法">
                </el-table-column>
                <el-table-column
                    prop="info"
                    label="参数说明">
                </el-table-column>
                <el-table-column
                    prop="choice"
                    label="可选值">
                </el-table-column>
                <el-table-column
                    prop="default"
                    label="默认值">
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import chart from '../components/chart'

    export default {
        name: '',
        data() {
            return {
                items: {
                    scatter: {
                        title: {
                            text: '散点图'
                        },
                        series: [{
                            data: [1, 2, 3, 4, 5]
                        }]
                    },
                    line: {
                        title: {
                            text: '折线图'
                        },
                        xAxis: {
                            data: ['周一', '周二', '周三', '周四', '周五']
                        },
                        series: [{
                            data: [1, 2, 3, 4, 5]
                        }]
                    },
                    bar: {
                        title: {
                            text: '柱状图'
                        },
                        xAxis: {
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        series: [{
                            data: [1, 2, 3, 4, 5, 6, 7]
                        }]
                    },
                    pie: {
                        title: {
                            text: '饼图'
                        },
                        series: [{
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 234, name: '联盟广告'},
                                {value: 135, name: '视频广告'},
                                {value: 1548, name: '搜索引擎'}
                            ]
                        }]
                    }
                },
                tableData: []
            }
        },
        mounted() {
            let tableData = [
                {
                    name: 'type',
                    usage: ':type',
                    info: '图表类型',
                    choice: 'scatter/line/bar/pie',
                    default: 'line'
                },
                {
                    name: 'items',
                    usage: ':items',
                    info: '图标数据',
                    choice: '-',
                    default: '-'
                }
            ]
            this.tableData = tableData
        },
        methods: {},
        components: {
            chart
        }

    }
</script>

<style scoped lang="less">

</style>
